<template>
  <div class="dtree-wrap deviceTree">
    <div class="main-title">{{ $t('屏幕管理') }}</div>
    <div class="tree-box">
      <bs-tree
        ref="asyncTree"
        :default-props="defaultProps"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        :show-checkbox="false"
        :draggable="false"
        :filter-visible="false"
        :context-menu-visible="false"
        :context-menu-data="contextMenuData"
        :data="treeData"
        :node-key="nodeKey"
        :highlight-current="true"
        @node-click="nodeClick"
      ></bs-tree>
    </div>
  </div>
</template>
<script>
import ScreenApi from '@/api/screen'
export default {
    data() {
        return {
            treeNodeData: {},
            currentNode: {},
            activeName: 'first',
            defaultProps: {
              id: 'groupScreen',
              label: "name",
              owner: 'owner',
              isLeaf: 'hasChild'
            },
            treeData: [],
            defaultTreeData: {
            },
            defaultCheckedKeys: [],
            defaultExpandedKeys: ['-2'],
            contextMenuData: [],
            nodeKey:'groupScreen'
        }
    },
    props: {
        showDeviceIndex: {
          type: Boolean,
          default: true
        },
        queryData: {
            default: {}
        }
    },
    components: {
    },
    created() {
      this.$eventBus.$on('getTreeNode', this.doClickTree);
    },
    beforeDestroy() {
      this.$eventBus.$off('getTreeNode');
    },
    mounted() {
      this.$nextTick(() => {
        this.loadTreeData()
      })
    },
    methods: {
      async loadTreeData() {
        this.treeData = [{
          groupScreen: '-2',
          id: -2,
          name: '终端分组',
          children: []
        }]
        let params = { 'parentId': 0 }
        const res = await ScreenApi.loadScreenTree({})
        if(res) {
          res.forEach(item => {
            this.treeData[0].children.push(item)
          })
        }
      },
      refreshNode() {
        this.loadTreeData()
      },
      // 点击节点
      nodeClick(data, node, obj) {
        this.treeNodeData = data
        this.currentNode = node
        if(data.groupScreen) {
          this.queryData.groupId = data.groupScreen.split('#')[0]
          this.queryData.screenId = data.groupScreen.split('#')[1]
        }else{
          this.queryData.groupId = data.id
        }
        this.queryData.page = 1
        this.$eventBus.$emit('doList', this.queryData)
      },
      // 添加节点
      addTreeNode() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0) {
          this.$alert('提示', '请选择一个终端分组节点')
          return
        }
        const selectTreeID = this.treeNodeData.id
        if(selectTreeID === -1) {
          this.$alert('提示', '默认分组不能添加子节点')
          return
        }
        this.$prompt('添加分组', '请输入分组名称').then(data => {
          if(data) {
            const params = { 'parentId': selectTreeID, 'name': data }
            this.$store.dispatch('device/doAddTreeNode', params).then(res => {
              this.refreshNode()
            })
          }
        })
        this.treeNodeData = {}
      },
      // 编辑节点
      editTreeNode() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0) {
          this.$alert('提示', '请选择一个终端分组节点')
          return
        }
        const nodeName = this.defaultProps.name
        const selectTreeID = this.treeNodeData.id
        this.$prompt('分组名修改', nodeName).then(data => {
          if(data) {
            if(data === nodeName) {
              this.$alert('提示', '名称未做改动')
              return
            }
            const params = { 'id': selectTreeID, 'name': data }
            this.$store.dispatch('device/doEditTreeNode', params).then(res => {   
              this.refreshNode()             
            })
          }
        })
      },
      // 删除节点
      removeTreeNode() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0) {
          this.$alert('提示', '请选择一个终端分组节点')
          return
        }
        this.$confirm('提示', '是否确认删除？').then(bool => {
          if(bool) {
            const selectTreeID = this.treeNodeData.id
            const params = { 'id': selectTreeID }
            this.$store.dispatch('device/doDeleteTreeNode', params).then(res => {
              this.currentNode.remove()
            })
          }
        })
      },
      // 设置
      settingDevice() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0 || this.treeNodeData.id === 0) {
          this.$alert('提示', '请先选择分组')
          return
        }
        this.$eventBus.$emit('addDeviceDialogShow', {updateGroupId: this.treeNodeData.id});
      },
      // 点击tab页
      doClickTree(treeItem) {
        this.treeNodeData = treeItem
      },
      handleClick(tab, event) {
        if(Number(tab.index) === 0) {
          this.loadTreeData()
        }else if(Number(tab.index) === 1){
          this.treeData = [{
            name: '一级 1',
            children: [{ name: '二级 1-1' }]
          }]
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.deviceTree {
  width: 100%;
  .el-tabs--border-card {
    border: 0;
  }
  ::v-deep .el-tabs--border-card .el-tabs__content {
    border: 0 !important;
  }
}
.ctl-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.shuaxin{color:red；}
.dtree-wrap {
  ::v-deep .el-tabs__item{padding:0 !important; width:125px; text-align:center;}
  ::v-deep .el-tabs__item:last-child{border-right:0 !important;}
}
.tree-box {
  width: 248px;
  height: calc(100vh - 150px);
  overflow: auto;

  .tree {
    height: 100%;
    ::v-deep .el-tree {
      min-width: 100%;
      display: inline-block !important;
    }
  }

  &.no-ctl {
    height: calc(100vh - 150px);
    .tree {
      height: 100%;
      ::v-deep .el-tree {
        min-width: 100%;
        display: inline-block !important;
      }
    }
  }
}
</style>